<template>
    <div>
        <el-card class="box-card" >
            <CommonPageNew
                    ref='formPage'
                    :pageParam="pageParam"
                    :callbackParam.sync="callbackParam"/>
        </el-card>
        <ComDialog
                :dialog="dialog"
                :visable.sync="dialog.visable">
            <ComForm :formDesign="formDesign"
                     ref='form'
                     :form.sync="form"
                     :btns="btns"></ComForm>
        </ComDialog>
    </div>
</template>
<script>
import {throttle} from "@/utils/index"
import {actionByTypeNew} from '@/utils/pageComMethods'
export default {
    data(){
        return {
            pageParam:{},
            dialog:{
                title:'角色配置',
                visable:false,
                width:'40%'
            },
            formDesign:{},
            form:{},
            btns:[],
            callbackParam:{}
        }
    },
    created(){
        this.initPageParam();
        this.initForm();
    },
    watch:{
      "dialog.visable":function(n,o){
          if(!n){
             this.form={};
             this.$refs.form.clear()
          }
        }
    },
    methods:{
        validateUserName:(rule, value, callback) => {
          var reg = /^[0-9A-Za-z/]{1,32}$/ //8-16位且同时包含数字和字母
          if (value === '') {
            callback(new Error('请输入角色名称'))
          } else if (!reg.test(value)) {
            callback(new Error('角色名称由32位以内的数字、大小写字母组成!'))
          } else {
            callback()
          }
        },
        initForm:function(){
            var that = this ;
            this.formDesign = {
                    // asterisk:true,
                    formItems : [
                        {
                            prop:'name',
                            label:'角色名称：',
                            type:'input',
                            // rules: [
                            //     { required: true, message: '角色名称不能为1空', trigger: 'blur' },
                            //     { validator: this.validateUserName, trigger: 'blur' }
                            //   ],
                        },
                        {
                            prop:'description',
                            label:'角色描述：',
                            type:'textarea',
                            // rules:
                            //   [
                            //     { required: true, message: '角色描述不能为1空', trigger: 'blur' },
                                
                            //   ],
                        },
                        {
                            prop:'isValidate',
                            label:'是否有效',
                            type:'switch',
                            active:'yes',
                            inactive:'no',
                        }
                    ],
                     rules: {
                      name: [
                        { required: true, message: '角色名称不能为空', trigger: 'blur' },
                        { validator: this.validateUserName, trigger: 'blur' }
                      ],
                      description: [
                        { required: true, message: 'description不能为空', trigger: 'blur' },
                        
                      ],
                    },
                };
            this.btns=[{
                    name: "保存",
                    type: '',
                    icon: 'el-icon-edit',
                    click: function () {
                        that.saveForm();
                    }
                }]
        },
        delete : function(row){
            this.$confirm("是否确定删除？","提示",{
                confirmButtonText:"确定删除"
            }).then(()=>{
                var id = row.id ;
                this.throttleServe("post",{},"/role/"+id,this,"delete","角色")
            })
        },
        deleteAll : function(){
            var arr = this.callbackParam.multipleSelection ;
            if(!arr ||  arr.length < 1){
                this.$message({
                    type:"warning",
                    message:"最少选中一条数据"
                });
                return ;
            }
            var temp = [];
            for(var i in arr){
                temp.push(arr[i].id);
            }
            this.$confirm("是否确定删除？","提示",{
                confirmButtonText:"确定删除"
            }).then(()=>{
                this.throttleServe("post",temp,"/api/role/removeByIds",this,"deleteAll","角色")
            })

        },
        saveForm:function(){
            var flag = this.$refs.form.validateForm();
            if(!flag)return;
            var temp = this.form;
            console.log({temp})
            if(temp.id){
              this.throttleServe("put",temp,"/role/",this,"update","角色")
            }else{
              this.throttleServe("post",temp,"/role/",this,"add","角色")
            }
        },
        throttleServe: throttle((methods, params, url, that,from,name) => {
          //from 来自于哪个按钮 如编辑update删除delete新增add等
          //name 需要操作的名称 
          console.log('methods', methods)
          actionByTypeNew(methods, url, params,that,from,name)
        }, 1000),
        renderPage:function(){
            this.initPageParam();
        },
        
        initPageParam : function(){
            var that = this ;
            this.pageParam = {
                isPagination:true,//是否分页
                isQualitySearch:false,//是否高级查询
                // searchParam : {
                //     placeholder:'请输入角色名称',
                //     maxlength:50,
                // },
                searchParam : [
                {
                    placeholder:'请输入角色名称',
                    maxlength:50,
                    prop : "name",
                    label : "角色名称",
                },
                {
                    placeholder:'请输入角色id',
                    maxlength:50,
                    prop : "id",
                    label : "角色ID",
                },
                ],
                conditions:this.conditions,//高级查询项
                btns : [
                    {
                        name:'新增',
                        type:'primary',
                        icon:'el-icon-circle-plus-outline',
                        click:function(){
                            that.viewForm(null);
                        }
                    },{
                        name:this.$t('common.batchDelete'),
                        type:'danger',
                        icon:'el-icon-delete',
                        click:function(){
                            that.deleteAll();
                        }
                    }
                ],
                tableParam : {//表单参数
                    border:true,//是否有边框
                    script:true,
                    highlightCurrentRow:true,//单行选择
                    maxHeight:"1500",//最大高度
                    multi:false,//是否为多选
                    columns:[{
                        prop : "name",
                        label : "角色名称",
                        fixed : 'left',
                        sortable : true,
                        // fixedDirect : 'left',
                        // width : "15"
                    },{
                        prop : "description",
                        label : "角色描述",
                        // width : "20"
                    },{
                        prop:"isValidate",
                        label:"是否有效",
                        // width:"15",
                    },{
                        prop : "createTime",
                        label : "创建时间",
                        // width : "15",
                        formatter:function(row){
                            return that.normalFormat(row.updateTime,"yyyy-MM-dd");
                        }
                    },{
                        prop : "updateTime",
                        label : "更新时间",
                        // width : "15",
                        formatter:function(row){
                            return that.normalFormat(row.updateTime,"yyyy-MM-dd");
                        }
                    },{
                        prop : "",
                        label : "操作",
                        width : "18",
                        sortable:'',
                        // fixedDirect:'right',
                        opers:[
                            {
                                name:"编辑",
                                type:'',
                                icon:'el-icon-edit',
                                click:function(row){
                                    that.viewForm(row);
                                }
                            }, {
                                name:'删除',
                                type:'danger',
                                icon:'el-icon-delete',
                                click:function(row){
                                    that.delete(row);
                                }
                            }
                            , {
                                name:'授权',
                                type:'danger',
                                icon:'el-icon-delete',
                                click:function(row){
                                    that.delete(row);
                                }
                            }
                        ]
                    }],
                },
                initData:{
                    url:'/role/page',
                    params:{
                        // "page":{
                        //     "pageSize":1,
                        //     "pageNum":10,
                        // },
                        "pageSize":10,
                        "pageNum":1,
                        "entity":{}
                    },
                },
            }
        },
        viewForm : function(row){
            if(!row){
                this.form = {
                    // id: this.uuid(),
                };
            }else{
                this.form = Object.assign({},row) ;
            }
            this.dialog.visable = true ;
        },
    }

}


</script>
<style scoped>




</style>





























